<template>
  <a-modal
        :title="title"
        :width="680"
        :visible="visible"
        :body-style="{paddingBottom: '100px',height:'520px',overflowY:'auto'}"
		:dialogStyle="{top:'50px'}"
		:maskClosable="false"
       @ok="onOk"
       @cancel="onCancel"
  >
	<a-form-model ref="liForm" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" :rules="rules">
		<a-form-model-item label="id" v-show="false">
		  <a-input v-model="form.id" />
		</a-form-model-item>
			<a-divider orientation="left">
				基础信息
			</a-divider>
			<a-row :gutter="16">
				<a-col class="gutter-row" :span="12">
					<a-form-model-item label="培训类型" prop="type" >
					  <a-select v-model="form.type" placeholder="请输入培训类型">
						<a-select-option  v-for="(obj, index) in typedata" :key="index" :value="obj.name">{{obj.name}}</a-select-option>
					  </a-select>
					</a-form-model-item>
					
				</a-col>
				<a-col class="gutter-row" :span="12">
					<a-form-model-item label="培训主题" prop="topic">
					  <a-input v-model="form.topic" placeholder="请输入培训主题"/>
					</a-form-model-item>
				</a-col>
			</a-row>
			<a-row :gutter="16">
				<a-col class="gutter-row" :span="12">
					<a-form-model-item label="培训时间" prop="trianingDate">
						<a-date-picker v-model="form.trianingDate" valueFormat="YYYY-MM-DD" placeholder="请输入调离时间" :style="{width:'100%'}"/>
					</a-form-model-item>
				</a-col>
				<a-col class="gutter-row" :span="12">
					<a-form-model-item label="培训时长" prop="trainingTime" >
					  <a-input-number :min="0" v-model="form.trainingTime" :style="{width:'100%'}" placeholder="请输入培训时长"/>
					</a-form-model-item>
				</a-col>
			</a-row>
			<a-row :gutter="16">
				<a-col class="gutter-row" :span="12">
					<a-form-model-item label="培训学时" prop="traningPeriod" >
					  <a-input-number :min="0" v-model="form.traningPeriod" :style="{width:'100%'}" placeholder="请输入培训学时"/>
					</a-form-model-item>
				</a-col>
				<a-col class="gutter-row" :span="12">
					<a-form-model-item label="外派学时" prop="outsidePeriod" >
					  <a-input-number :min="0" v-model="form.outsidePeriod" :style="{width:'100%'}" placeholder="请输入外派学时"/>
					</a-form-model-item>
				</a-col>
			</a-row>
			<a-row :gutter="16">
				<a-col class="gutter-row" :span="24" >
					<a-form-model-item label="培训内容" prop="contents" :labelCol="{span:4}" :wrapperCol="{span:20}">
						<a-textarea v-model="form.contents" placeholder="请输入培训内容" :style="{width:'100%'}" :auto-size="{ minRows: 6, maxRows: 8 }"/>
					</a-form-model-item>
				</a-col>
			</a-row>
			
		</a-form-model>
  </a-modal>
</template>

<script>
	const leadercolumns = [
	  {
		title: '干部名称',
		width:'120px',
		dataIndex: 'leaderInfoId',
		scopedSlots: { customRender: 'leaderInfoId' },
	  },
	  {
	  	title: '请假天数',
		width:'120px',
	  	dataIndex: 'leaveDays',
	  	scopedSlots: { customRender: 'leaveDays' },
	  }
	]
import {getUrl} from '@/api/manage'
export default {
  components:{
   
  },
  name:"TraningInfoForm",
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    loading: {
      type: Boolean,
      default: () => false
    },
    model: {
      type: Object,
      default: () => null
    },
    title: {
      type: String,
      default : ''
    }
  },
  data () {
    return {
		leadercolumns,
		labelCol: { span: 8 },
		wrapperCol: { span:16 },
		selecetPosition : triggerNode => {return triggerNode.parentNode || document.body;},
		form: {
			id:'',
			leaderInfoId: undefined,
			type: undefined,
			trianingDate: undefined,
			topic:undefined,
			trainingTime:undefined,
			trainingNums:undefined,
			traningPeriod:undefined,
			leaveDays:undefined,
			outsidePeriod:undefined,
			contents:undefined
		},
		typedata:[],
		rules: {
			leaderInfoId: [
			  {required: true, message: '培训干部不能为空', trigger: 'change' },
			 
			],
			type: [
			  {required: true, message: '培训类型不能为空', trigger: 'blur' },
			  
			],
			trianingDate: [
			  {required: true, message: '培训时间不能为空', trigger: 'change' },
			],
			topic: [
				{required: true, message: '培训主题不能为空', trigger: 'blur' },
			],
			trainingTime: [
				{required: true, message: '培训时长不能为空', trigger: 'blur' },
			],
			contents: [
				{required: true, message: '培训内容不能为空', trigger: 'blur' },
			],
			traningPeriod: [
				{required: true, message: '培训学时不能为空', trigger: 'blur' },
			]
      },
    }
  },
  created () {
    // 当 model 发生改变时，为表单设置值
    this.$watch('model', () => {
      Object.assign(this.form, this.model)
    })
  },
  methods: {
	fetch(value){
		var _this = this
		getUrl('leaderInfo/listbyname', {name:value})
		  .then(res => {
		    console.log(res)
		    _this.leaderdata = res.result
		})
	},
	handleSearch(value) {
		console.log(value);
		this.fetch(value);
	},
	handleChange(value) {
		console.log(value);
		this.value = value;
		this.fetch(value);
	},
    onCancel() {
       this.$emit("cancel",this)
    },
    onOk() {
       this.$emit("ok",this)
    },
	handleAddLeader() {
		const { traningLeaderData } = this.form;
		const newData = {
			key : this.form.traningLeaderData.length + 1,
			id:'',
			leaderInfoId:undefined,
			leaveDays:undefined,
		  };
		this.form.traningLeaderData = [...traningLeaderData, newData];
	},
  }
}
</script>
<style>
</style>
